/* 
 * 恋爱交友小程序全局混合器
 * 此文件定义了可重用的SCSS混合器
 * 在组件中使用: @import "~@/styles/mixins.scss";
 */

// 弹性布局
@mixin flex($direction: row, $justify: flex-start, $align: center, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 水平居中
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 两端对齐
@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 垂直方向的弹性布局
@mixin flex-column {
  display: flex;
  flex-direction: column;
}

// 文本溢出省略
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行文本溢出省略
@mixin multi-ellipsis($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 卡片样式
@mixin card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

// 主按钮样式
@mixin primary-button {
  background: #FF4791;
  color: #FFFFFF;
  border-radius: 40rpx;
  font-size: 28rpx;
  padding: 20rpx 40rpx;
  text-align: center;
}

// 次要按钮样式
@mixin secondary-button {
  background: #FFFFFF;
  color: #FF4791;
  border: 1px solid #FF4791;
  border-radius: 40rpx;
  font-size: 28rpx;
  padding: 20rpx 40rpx;
  text-align: center;
}

// 文本按钮样式
@mixin text-button {
  color: #FF4791;
  font-size: 26rpx;
  background: transparent;
  text-align: center;
}

// 标签样式
@mixin tag {
  display: inline-block;
  padding: 6rpx 16rpx;
  background: rgba(255, 71, 145, 0.1);
  color: #FF4791;
  border-radius: 4rpx;
  font-size: 22rpx;
  margin-right: 10rpx;
}

// 列表项样式
@mixin list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1px solid #EEEEEE;
  
  &:last-child {
    border-bottom: none;
  }
}

// 输入框样式
@mixin input {
  background: #F8F8F8;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 26rpx;
  color: #333333;
  width: 100%;
  box-sizing: border-box;
}

// 头像样式
@mixin avatar($size: 120rpx) {
  width: $size;
  height: $size;
  border-radius: 50%;
  object-fit: cover;
}

// 阴影效果
@mixin shadow($level: 'light') {
  @if $level == 'light' {
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  } @else if $level == 'medium' {
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  } @else if $level == 'dark' {
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  }
}

// 过渡效果
@mixin transition($property: all, $duration: 0.3s, $timing: ease) {
  transition: $property $duration $timing;
}

// 禁用状态
@mixin disabled {
  opacity: 0.5;
  pointer-events: none;
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 响应式图片
@mixin responsive-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

// 页面容器
@mixin page-container {
  min-height: 100vh;
  background-color: #F8F8F8;
  padding: 30rpx;
}

// 页面标题
@mixin page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 30rpx;
} 